<template>
  <div class="home_page">
    <!-- 头部搜索 -->
    <header
      class="header u-f u-f-ac"
      :class="[headerBgWhite ? 'bg_white' : '']"
    >
      <div class="icon_box u-f u-f-ac u-f-jc">
        <i class="iconfont icon-caidan"></i>
      </div>
      <div class="search_box u-f u-f-ac u-f-jc u-f1">
        <span v-show="headerBgWhite">名字</span>
      </div>
      <div class="icon_box u-f u-f-ac u-f-jc">
        <i class="iconfont icon-sousuo"></i>
      </div>
    </header>
    <!-- 主体 -->
    <div class="main" @scroll="mainScroll($event)"></div>
    <!--  -->

    <van-tabbar route :border="false">
      <van-tabbar-item replace to="/" icon=" iconfont icon-musiccloud">
        发现
      </van-tabbar-item>
      <van-tabbar-item replace to="/mine" icon=" iconfont icon-yinyue">
        我的
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, Ref } from 'vue'

// 处理内容滚动时，头部颜色变化
const handleMainScroll = (headerBgWhite: Ref<boolean>) => {
  const mainScroll = (event: any) => {
    if (event.target.scrollTop >= 5) {
      headerBgWhite.value = true
    } else {
      headerBgWhite.value = false
    }
  }

  return {
    mainScroll,
  }
}

export default defineComponent({
  name: 'Mine',
  setup() {
    const headerBgWhite: Ref<boolean> = ref(false)

    return {
      headerBgWhite,
      ...handleMainScroll(headerBgWhite),
    }
  },
})
</script>

<style lang="less" scoped>
.home_page {
  height: 100vh;
  background-color: var(--sky-page-background-color);
  .header {
    height: 50px;
    &.bg_white {
      background-color: var(--sky-white-background-color);
      .search_ipt {
        background-color: var(--sky-page-background-color);
      }
    }
    .icon_box {
      width: 45px;
      height: 100%;
      .iconfont {
        font-size: 22px;
        &.icon-maikefeng {
          font-size: 23px;
        }
      }
    }
    .search_box {
      color: var(--sky-text-black-color);
    }
  }

  .main {
    height: calc(100vh - 103px);
    overflow-x: hidden;
    overflow-y: auto;
  }
}
</style>